<!---------------------------------------- 美食店铺分类页面 --------------------------- -->
<template>
    <div>
        <!-- 分类列表展示区域 -->
        <div v-show="activeStatu">
            <el-card class="box">
                <div class="card-padding">
                    <!-- 列表头部信息 -->
                    <div class="flex">
                        <div class="two">分类标题</div>
                        <div class="time_top">创建时间</div>
                    </div>
                    <!-- 搜索和筛选区域 -->
                    <div class="flexBox">
                        <div>
                            <!-- 分类名称搜索框 -->
                            <el-input v-model.trim="inputed" @input="filters" placeholder="输入内容" class="two">
                                <template #prefix>
                                    <el-icon class="el-input__icon">
                                        <search />
                                    </el-icon>
                                </template>
                            </el-input>
                        </div>
                        <div class="ml-20">
                            <!-- 日期范围筛选器 -->
                            <el-date-picker class="two" @change="data_filters" v-model="time" type="daterange"
                                range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
                        </div>
                    </div>

                    <!-- 操作按钮区域 -->
                    <div class="flex">
                        <div><el-button type="primary" @click="add" class="add_class">
                                新增</el-button>
                        </div>
                        <el-button type="danger" class="delelist" @click="deleList">批量删除</el-button>
                    </div>

                    <!-- 分类列表表格 -->
                    <div>
                        <el-table :data="activeList.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
                            class="mt-10 table-full-width" :cell-style="{ 'text-align': 'center' }" lazy="true"
                            v-el-table-infinite-scroll="handleTableScroll" height="auto"
                            :header-cell-style="{ 'text-align': 'center' }" @selection-change="handleSelectionChange">
                            <el-table-column type="selection" fixed="left" />
                            <el-table-column prop="id" label="序号" fixed="left" />
                            <el-table-column prop="title" label="标题" show-overflow-tooltip />
                            <el-table-column prop="createtime" label="创建时间" />
                            <el-table-column label="操作" width="250" fixed="right">
                                <template #default="scope">
                                    <div class="handle">
                                        <div @click="edit(scope.row)" class="text-blue cursor-pointer">编辑</div>
                                        <div class="w-10"></div>
                                        <div @click="deletes(scope.row)" class="text-red cursor-pointer">删除</div>
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>

                    <!-- 分页控件 -->
                    <div class="paging">
                        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                            :page-sizes="[5, 10, 20, 50]" :small="small" :disabled="disabled" background
                            layout="total, sizes, prev, pager, next, jumper" :total="activeList.length" />
                    </div>

                    <!-- 单个删除确认对话框 -->
                    <el-dialog title="删除" v-model="centerDialogVisible" width="30%" center>
                        <div class="dialog-message">确认删除该数据吗?</div>
                        <div class="flex justify-end">
                            <el-button @click="centerDialogVisible = false">取 消</el-button>
                            <el-button type="primary" @click="deleteid">确 定</el-button>
                        </div>
                    </el-dialog>

                    <!-- 批量删除确认对话框 -->
                    <el-dialog v-model="shows" title="是否要删除" center width="20vw">
                        <el-button @click="shows = false">取 消</el-button>
                        <el-button type="primary" @click="oks">确 定</el-button>
                    </el-dialog>

                    <!-- 批量删除确认对话框（另一个版本） -->
                    <el-dialog title="批量删除" v-model="centerDialogVisiblet" width="30%" center>
                        <div class="dialog-message">确认删除这批数据吗?</div>
                        <span slot="footer" class="flex justify-between dialog-footer">
                            <div></div>
                            <div>
                                <el-button @click="centerDialogVisiblet = false">取 消</el-button>
                                <el-button type="primary" @click="deleteid_t">确 定</el-button>
                            </div>
                        </span>
                    </el-dialog>
                </div>
            </el-card>
        </div>

        <!-- 新增/编辑分类表单区域 -->
        <div v-show="activeStatud" class="p-10">
            <el-card class="card-container">
                <div class="card-title">{{ addText }}</div>
                <div class="divider"></div>

                <!-- 表单区域 -->
                <div class="form-container">
                    <el-form ref="ruleFormRef" class="form-width" :model="ruleForm" status-icon :rules="rules"
                        label-position="left" label-width="auto">
                        <el-form-item label="分类名称" prop="title" class="form-item-full-width">
                            <el-input v-model.trim="ruleForm.title" placeholder="请输入" class="input-full-width"
                                @blur="checkDuplicate" />
                        </el-form-item>
                    </el-form>

                    <!-- 表单操作按钮 -->
                    <div class="dialog-footer">
                        <el-button type="primary" @click="submitForm(ruleFormRef)">确认</el-button>
                        <el-button @click="closes(ruleFormRef)">取消</el-button>
                    </div>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { foodList, foodSave, foodDel } from '../../../api/food/index';
import { ElMessage, ElCard } from 'element-plus';

// 数据筛选和分页相关变量
const time = ref('')
const activeList = ref([]);         // 当前显示的分类列表
const activeStatu = ref(true)       // 控制列表区域显示/隐藏
const activeStatud = ref(false)     // 控制表单区域显示/隐藏
const dialogTableVisible = ref(false);
const statused = ref('1');          // 状态标记：1表示新增，2表示编辑

// 表格分页相关
const inputed = ref('');            // 搜索框输入内容
const pageSize = ref(5);            // 每页显示数量
const currentPage = ref(1);         // 当前页码
const copyList = ref([]);           // 原始数据备份，用于搜索筛选
const files = ref(false);

// 分类名称查重相关
const categoryExists = ref(false);  // 标记分类名称是否已存在
const categoryName = ref('');       // 已存在的分类名称
const originalTitle = ref('');      // 保存编辑前的原始标题，用于编辑时的查重逻辑

// 从本地存储获取token
let tokens = JSON.parse(localStorage.getItem('tokens'));
console.log(tokens);

// 初始化渲染列表数据
render();
function render() {
    foodList().then((res) => {
        console.log(res);
        activeList.value = res.data;
        copyList.value = res.data;    // 备份原始数据用于搜索
    });
}

// 点击新增按钮处理函数
const addText = ref("")
function add() {
    activeStatu.value = false         // 隐藏列表区域
    addText.value = '添加'
    activeStatud.value = true         // 显示表单区域
    dialogTableVisible.value = true;
    statused.value = '1';             // 设置为新增状态
    disableds.value = true;

    // 重置表单数据
    ruleForm.title = '';
    ruleForm.start_time = '';
    ruleForm.end_time = '';
    ruleForm.details = '';
    ruleForm.img = '';
    ruleForm.synopsis = '';

    // 重置查重状态
    categoryExists.value = false;
    categoryName.value = '';
    originalTitle.value = '';         // 新增时没有原始标题
}

// 表单数据和验证规则
const ruleForm = reactive({
    title: '',
});
const ruleFormRef = ref('');
const rules = reactive({
    title: [
        {
            required: true,
            message: '请输入分类名称',
            trigger: 'blur',
        },
        {
            validator: (rule, value, callback) => {
                if (categoryExists.value && value === categoryName.value) {
                    callback(new Error('分类名称已存在'));
                } else {
                    callback();
                }
            },
            trigger: 'blur'
        }
    ]
});

// 分类名称查重函数
function checkDuplicate() {
    // 如果输入为空则不进行查重
    if (!ruleForm.title.trim()) return;

    // 编辑状态下，如果名称与原始名称相同，则不进行查重
    if (statused.value === '2' && ruleForm.title === originalTitle.value) {
        categoryExists.value = false;
        categoryName.value = '';
        return;
    }

    // 在本地数据中查找是否存在相同的分类名称
    const exists = activeList.value.some(item =>
        item.title === ruleForm.title.trim() &&
        // 编辑状态下，排除当前编辑的项
        (statused.value !== '2' || item.id !== ids.value)
    );

    if (exists) {
        categoryExists.value = true;
        categoryName.value = ruleForm.title.trim();
        ElMessage.warning('该分类名称已存在');
    } else {
        categoryExists.value = false;
        categoryName.value = '';
    }
}

// 时间验证函数（目前未使用）
function validateEmailDomain(rule, value, callback) {
    if (value === '') {
        callback(new Error('结束时间不能为空'));
    } else if (value < ruleForm.start_time) {
        // 假设我们只允许 @example.com 的邮箱  
        callback(new Error('结束时间不能小于开始时间'));
    } else {
        callback();
    }
}

const imgUrls = ref('');

// 提交表单处理函数
const submitForm = (formEl) => {
    console.log(ruleForm);
    if (!formEl) return;

    // 表单验证
    formEl.validate((valid) => {
        if (valid) {
            // 再次检查名称是否存在
            if (categoryExists.value && ruleForm.title === categoryName.value) {
                ElMessage.warning('分类名称已存在');
                return;
            }

            if (statused.value == '1') {
                // 新增操作
                console.log(ruleForm);
                foodSave(ruleForm).then((res) => {
                    if (res.code == '1') {
                        ElMessage({
                            message: '新增成功',
                            type: 'success',
                        });
                        setTimeout(() => {
                            activeStatud.value = false;  // 隐藏表单区域
                            activeStatu.value = true;    // 显示列表区域
                        }, 1200);
                        render();  // 重新加载数据
                    }
                });
            } else if (statused.value == '2') {
                // 编辑操作
                ruleForm.id = ids.value
                foodSave(ruleForm).then((res) => {
                    if (res.code == '1') {
                        ElMessage({
                            message: '编辑成功',
                            type: 'success',
                        });
                        setTimeout(() => {
                            activeStatud.value = false;
                            activeStatu.value = true;
                        }, 1200);
                        render();
                    } else {
                        ElMessage({
                            message: '编辑失败，不能和原数据一致',
                            type: 'warning',
                        });
                    }
                });
            }
        }
        else {
            ElMessage({
                message: '新增失败',
                type: 'error',
            });
        }
    });
};

// 编辑相关变量
const ids = ref('');
const disableds = ref(true);

// 关闭表单处理函数
const closes = (formEl) => {
    activeStatu.value = true;         // 显示列表区域
    activeStatud.value = false;       // 隐藏表单区域
    formEl.resetFields();             // 重置表单字段
    formEl.clearValidate();           // 清除表单验证状态
    dialogTableVisible.value = false;
    files.value = false;
    ruleForm.name = '';
    fileList.value = [];
    fileListt.value = [];
};

// 点击编辑按钮处理函数
function edit(item) {
    Object.assign(ruleForm, item);    // 填充表单数据
    addText.value = '编辑'
    ids.value = item.id;
    activeStatud.value = true         // 显示表单区域
    activeStatu.value = false         // 隐藏列表区域
    ruleForm.name = item.title
    disableds.value = false;
    statused.value = '2';             // 设置为编辑状态

    // 重置查重状态并保存原始标题
    categoryExists.value = false;
    categoryName.value = '';
    originalTitle.value = item.title; // 保存编辑前的原始标题
}

// 点击删除按钮处理函数
function deletes(item) {
    console.log(item);
    centerDialogVisible.value = true; // 显示删除确认对话框
    deleteids.value = item.id;        // 保存要删除的ID
}

const deleteids = ref('');
const centerDialogVisible = ref(false);

// 确认删除处理函数
function deleteid() {
    foodDel({
        ids: deleteids.value,
    }).then((res) => {
        if (res.code == '1') {
            centerDialogVisible.value = false; // 关闭确认对话框
            ElMessage({
                message: '删除成功',
                type: 'success',
            });
            render();  // 重新加载数据
        }
    });
}

// 分类名称搜索处理函数
function filters() {
    currentPage.value = 1  // 重置页码为1
    console.log(inputed.value);

    // 筛选包含搜索内容的分类
    activeList.value = copyList.value.filter(function (item) {
        // 判断是否满足搜索条件
        if (String(item.title).indexOf(String(inputed.value)) > -1) {
            return item;  // 原代码此处返回a，应为item
        }
    });
    currentPage.value = 1  // 重置页码为1
}

// 日期范围搜索处理函数
const data_filters = () => {
    let end_time
    let start_time
    let ars = []

    // 处理选择的日期范围
    if (time.value) {
        end_time = Date.parse(new Date(time.value[0]))
        start_time = Date.parse(new Date(time.value[1]))
    }

    // 筛选符合条件的分类
    activeList.value = copyList.value.filter((item) => {
        if (item.title ?
            item.title.indexOf(inputed.value) > -1 &&
            (time.value ?
                Date.parse(new Date(`${item.createtime}`)) > end_time &&
                Date.parse(new Date(` ${item.createtime}`)) < start_time : true
            ) : true
        ) {
            return item
        }
        ars.push(item)
    });
}

const shows = ref(false);

// 批量删除相关
// 全选单选处理
const SelectArr = ref([])  // 当前选中的项
const All_Delete = ref([]) // 要删除的ID数组
const handleSelectionChange = (val) => {
    All_Delete.value = []
    SelectArr.value = val

    // 收集选中项的ID
    SelectArr.value.forEach(item => {
        All_Delete.value.push(item.id)
    })
    console.log(All_Delete.value);
}

// 批量删除处理
const centerDialogVisiblet = ref(false)
const st = ref([])
function deleList() {
    st.value = []
    console.log(All_Delete.value);
    st.value.push(All_Delete.value)

    // 检查是否有选中项
    if (All_Delete.value == '') {
        ElMessage({
            message: '请勾选要删除的数据',
            type: 'warning',
        })
    } else {
        centerDialogVisiblet.value = true  // 显示批量删除确认对话框
    }
}

// 确认批量删除处理函数
const deleteid_t = () => {
    foodDel({
        ids: st.value.join(','),
    }).then(res => {
        console.log(res, '删除成功或失败回调');
        centerDialogVisiblet.value = false;  // 关闭确认对话框
        render();  // 重新加载数据
        ElMessage({
            message: '删除成功',
            type: 'success',
        })
    })
}
</script>

<style>
/* 你的样式 */
.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.two {
    width: 220px;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: '';
}

.clearfix:after {
    clear: both;
}

.box-card {
    display: flex;
    height: 300px;
    width: 90%;
}

.handle {
    display: flex;
    justify-content: center;
    align-items: center;
}

.paging {
    margin-top: 15px;
    display: flex;
    justify-content: center;
}

.flex {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.flexBox {
    display: flex;
    margin-bottom: 15px;
}

.el-date-range-picker__content {
    box-sizing: border-box;
    float: left;
    margin: 0;
    padding: 16px;
    width: 38%;
}

/* 新增样式类 */
.card-padding {
    padding: 10px;
}

.ml-20 {
    margin-left: 20px;
}

.mt-10 {
    margin-top: 10px;
}

.table-full-width {
    width: 100%;
}

.text-blue {
    color: rgba(64, 158, 255, 1);
}

.text-red {
    color: red;
}

.cursor-pointer {
    cursor: pointer;
}

.w-10 {
    width: 10px;
}

.dialog-message {
    font-size: 16px;
    padding-bottom: 20px;
}

.p-10 {
    padding: 10px;
}

.card-container {
    width: 96%;
    margin-left: 2%;
    margin-top: 1%;
    position: relative;
    height: 80vh;
}

.card-title {
    padding: 10px;
}

.divider {
    width: 100%;
    height: 1px;
    background-color: rgba(195, 195, 195, 1);
}

.form-container {
    margin-top: 35px;
    margin-left: 80px;
}

.form-width {
    width: 40%;
}

.form-item-full-width {
    width: 100%;
}

.input-full-width {
    width: 100%;
}

.dialog-footer {
    position: absolute;
    bottom: 20px;
    right: 40px;
}
</style>